<!--  -->
<template>
  <div class="">
    <el-tabs type="border-card">
      <el-tab-pane label="图片类型">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="房屋图片" name="1">
            <el-upload
              action="http://192.168.100.120:8080/voucher/file/upload.do"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="listUrl"
              :multiple="true"
              class="upload"
              list-type="picture-card"
              :auto-upload="true"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-collapse-item>
          <el-collapse-item title="产权图片" name="2">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :multiple="true"
              class="upload"
              list-type="picture-card"
              :auto-upload="false"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-collapse-item>
          <el-button class="filter-item" type="primary" icon="el-icon-edit">添 加</el-button>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="文件类型">文件类型
        <upload-file></upload-file>
      </el-tab-pane>
      <el-tab-pane label="其它类型">其它类型</el-tab-pane>
    </el-tabs>
    <!-- <el-tabs
      v-model="editableTabsValue"
      type="border-card"
      @tab-click="tabClick"
      editable
      @edit="handleTabsEdit"
    >
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <panel-content></panel-content>
      </el-tab-pane>
    </el-tabs>-->
    <el-dialog :title="imgTitle" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-dialog title="测试" :visible.sync="dialogshow">
      <!-- "<iframe :src="url" type="application/x-google-chrome-pdf" width="100%" height="100%"></iframe>" -->
      <embed src="file:///C:/Users/Administrator/Desktop/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%B9%B3%E5%8F%B0.pdf" type="application/pdf" width="100%" height="100%">
      <!-- <a href="file:///C:/Users/Administrator/Desktop/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%B9%B3%E5%8F%B0.pdf">111</a> -->
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import uploadFile from "@/views/upload/uploadFile";
import upload from "@/api/upload.js";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {  uploadFile },
  data() {
    //这里存放数据
    return {
      url:"",
      dialogshow: "",
      dialogImageUrl: "",
      dialogVisible: false,
      editableTabsValue: "1",
      imgTitle: "图片的标题",
      listUrl: [],
      editableTabs: [
        {
          name: "1",
          title: "选项卡1"
        },
        {
          name: "2",
          title: "选项卡2"
        }
      ],
      activeNames: ["1"],
      tabIndex: 2
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    //当图片列表发生变化执行
    listUrl() {
      return this.listUrl;
    }
  },
  //方法集合
  methods: {
    upload(content) {
      console.log(content);
      console.log("执行上传");
      // upload(content)
      //   .then(response => {
      //     console.log(response);
      //   })
      //   .catch(error => {
      //     console.log(error);
      //   });
    },
    tabClick() {},
    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //点击图片预览大图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.imgTitle = file.name;
    },
    handleChange(val) {
      console.log(val);
    },
    //文件上传成功时的钩子
    handleSuccess(response, file, fileList) {
      if (response.code === 100) {
        this.$message({
          message: "上传文件成功!",
          type: "success"
        });
      }
      console.log(response);
      console.log(file);
      console.log(fileList);
    },
    //文件上传失败时的钩子
    handleError(err, file, fileList) {
      this.$message({
        message: "上传文件失败!" + err,
        type: "success"
      });
    },
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let newTabName = ++this.tabIndex + "";
        this.editableTabs.push({
          title: "New Tab",
          name: newTabName,
          content: "New Tab content"
        });
        this.editableTabsValue = newTabName;
      }
      if (action === "remove") {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.dialogshow = true;
    this.listUrl = [
      {
        name: "aaa.png",
        url: "blob:http://localhost:9527/ea776432-3a88-4544-a3a2-7d32af3ea3a4"
      }
    ];
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.url="file:///C:/Users/Administrator/Desktop/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%B9%B3%E5%8F%B0.pdf";
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.upload {
  width: 100%;
}
</style>